<template>
  <div>
    <div class="contract_base_title">评审小组</div>

    <el-form :model="formData" ref="scoreRef">
      <merge-table
        ref="mergeTableRef"
        style="margin-bottom: 10px"
        :showIndex="false"
        :tableData="formData.tableData"
        :checkbox="false"
        :mergeFields="mergeFields"
        :column="reviewPanelList"
        :actionBtnIsShow="false"
      >
        <!-- 适用指标范围 -->
        <template #quotaIds="scope">
          <el-form-item>
            <div class="IndexItemContent">
              <div class="itemContent">
                <div v-for="(item, index) in scope.scope.quotaList.slice(0, 4)" :key="index" class="IndexItem_">
                  <div>{{ item.kpiQuotaTypeName }}</div>
                  <span class="ml_3 flex" @click="deleteIndex(scope.scope.index, index, 'quotaIds')" v-if="!props.isPreview"
                    ><el-icon :size="15"><Close /></el-icon
                  ></span>
                </div>
                <div class="indexItemList" v-if="scope.scope.quotaList.length > 4">
                  <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.scope.lastAllQuotaName">
                    <template #reference>
                      <div class="m-2 bg_f2f3f5">...</div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-form-item>
        </template>
        <!-- 适用供应商范围 -->
        <template #vendorIds="scope">
          <el-form-item>
            <div class="IndexItemContent">
              <div class="itemContent">
                <div class="IndexItem" v-if="scope.scope.isCheckAllVendor">
                  <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.scope.checkVendorName">
                    <template #reference>
                      <div class="m-2 bg_f2f3f5">全部</div>
                    </template>
                  </el-popover>
                </div>
                <div class="IndexItem" v-else>
                  <div v-for="(item, index) in scope.scope.vendorList.slice(0, 4)" :key="index" class="indexItemList">
                    <span>{{ item.vendorName }}</span>
                    <span class="ml_3 flex" @click="deleteIndex(scope.scope.index, index, 'vendorIds')" v-if="!props.isPreview"
                      ><el-icon :size="15"><Close /></el-icon
                    ></span>
                  </div>
                  <div class="indexItemList" v-if="scope.scope.vendorList.length > 4">
                    <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.scope.lastAllVendorName">
                      <template #reference>
                        <div class="m-2 bg_f2f3f5">...</div>
                      </template>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </template>
      </merge-table>
    </el-form>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted } from 'vue'
import MergeTable from '@/components/MergeTable.vue'
import { useMock } from '../hooks/mock.js'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
const $route = useRoute()
const source = ref($route.query.source)
const { t } = useI18n()
let { reviewPanelList } = useMock()
const mergeTableRef = ref()
const scoreRef = ref()
const $emit = defineEmits(['update:modelValue', 'reviewPanelData'])
const props = defineProps({
  isPreview: {
    type: Boolean,
    default: false
  },
  modelValue: {
    typeof: Object,
    default: () => {}
  },
  vendorList: {
    typeof: Array,
    default: () => []
  }
})

const formData = ref({
  tableData: []
})
console.log(props.modelValue)
const mergeFields = ['reviewTeamName', 'quotaIds', 'vendorIds']

formData.value.tableData.forEach((v) => {
  v.deptNameList = v.deptNameList?.toString()
})

const transformArray = (list) => {
  let arr = []
  let index = 0
  for (let i = 0; i < list.length; i++) {
    let team = list[i]
    index++
    for (let j = 0; j < team.reviewers?.length; j++) {
      let reviewer = team.reviewers[j]
      let newObj = {
        id: team.id,
        reviewTeamName: team.name
      }
      newObj['reviewers'] = [reviewer]
      newObj['mianId'] = index
      newObj['weight'] = reviewer.weight
      newObj['empName'] = reviewer.empName
      newObj['empId'] = reviewer.empId
      newObj['vendorIds'] = (team?.vendors || []).map((v) => v.id) || []
      newObj['quotaIds'] = (team?.quotas || []).map((v) => v.id) || []
      let quotaList = team?.quotas?.map((v) => {
        return {
          id: v.id,
          kpiQuotaTypeName: v.value
        }
      })
      newObj['quotaList'] = quotaList || []
      let vendorList = team?.vendors?.map((v) => {
        return {
          id: v.id,
          vendorName: v.value
        }
      })
      newObj['vendorList'] = vendorList || []
      const allVendorNum = props.vendorList?.length || 0
      if (allVendorNum) {
        if (team.vendors?.length == allVendorNum) {
          newObj.isCheckAllVendor = true
        } else {
          newObj.isCheckAllVendor = false
        }
        if (allVendorNum > 4) {
          newObj.lastAllVendorName = team?.vendors?.map((v) => v.value).toString()
        }
      }
      newObj.checkVendorName = team?.vendors?.map((v) => v.value).toString()
      let allQuotaNum = team.quotas?.length || 0
      if (allQuotaNum > 4) {
        const quotasList = JSON.parse(JSON.stringify(team.quotas)).splice(4) || []
        newObj.lastAllQuotaName = quotasList?.map((v) => v.value).toString()
      }
      arr.push(newObj)
    }
  }
  return arr
}

onMounted(async () => {
  formData.value.tableData = (await transformArray(props.modelValue?.list)) || []
  // console.log(formData.value.tableData)
  nextTick(() =>{
    mergeTableRef.value.toMergeColumn()
  })
})

defineExpose({})
</script>
<style lang="scss" scoped>
.area {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  .asterisk {
    color: red;
  }
  .title {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin-right: 18px;
  }
}
.scorerArea {
  // display: flex;
  width: 100%;
  min-height: 20px;
  // justify-content: space-between;
  // align-items: center;
  position: relative;
  .editScorer {
    font-size: 16px;
    position: absolute;
    top: 0%;
    right: 0;
  }
}
.IndexItemContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // flex-wrap: wrap;
  width: 180px;
}

.IndexItem {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  // text-overflow: ellipsis;
  padding: 0 10px;
  margin-top: 5px;
  color: #1d2129;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  :nth-child(1) {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :last-child {
    flex: 1;
  }
}
.itemContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.IndexItem_ {
  background-color: #f2f3f5;
  // width: 120px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
  margin-top: 5px;
  color: #1d2129;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 5px;
}

.bg_f2f3f5 {
  background-color: #f2f3f5;
  height: 25px;
  line-height: 25px;
  text-align: center;
  padding: 0 10px;
}
</style>
